<template>
  	<div class="app-container">
   	 	<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      		<el-form-item label="" prop="user_ids">
				<el-select v-model="queryParams.user_ids" placeholder="请选择社群老师" multiple collapse-tags filterable clearable>
					<el-option v-for="item in teacherList" :key="item.wx_user_id" :label="item.name" :value="item.wx_user_id" />
				</el-select>
      		</el-form-item>
      		<el-form-item label="">
        		<el-date-picker
					v-model="dateRange"
					type="datetimerange"
					value-format="yyyy-MM-dd HH:mm:ss"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:default-time="['00:00:00', '23:59:59']"
					align="right">
				</el-date-picker>
      		</el-form-item>
			<el-form-item label="" prop="is_aifanfan">
        		<el-select v-model="queryParams.is_aifanfan" placeholder="接量方案" clearable style="width: 160px">
                  	<el-option label="基木鱼" value="1" />
                  	<el-option label="非基木鱼" value="0" />
              	</el-select>
      		</el-form-item>

			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
    	</el-form>


		<el-table v-loading="loading" :data="tableList">
			<el-table-column label="社群老师" align="center" prop="wechat_name" :show-overflow-tooltip="true"/>
			<el-table-column label="加微量" align="center" prop="flow_num"/>
			<el-table-column label="企微排重" align="center" prop="wechat_unique_num"/>
			<el-table-column label="重复比率" align="center" prop="rate">
				<template slot-scope="scope">
					<span>{{ scope.row.rate }}%</span>
				</template>
			</el-table-column>
			<el-table-column label="是否基木鱼" align="center" prop="is_aifanfan"/>
		</el-table>
 	</div>
</template>

<script>
import { getTeacher } from "@/api/teacher";
import { getHourList } from "@/api/placement";

export default {
	data() {
		return {
			loading: false, // 遮罩层
			teacherList: [], //社群老师
			dateRange: [],
			queryParams: {user_ids:[]},
			tableList:[],
		};
	},
	created() {
		this.getTeacher();
	},
	methods: {
		/** 下拉社群老师 */
		getTeacher() {
			getTeacher().then((res) => {
				this.teacherList = res.data;
			});
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.queryParams = {
				user_ids:[],
			};
			this.dateRange = [];
			this.tableList = []
			// this.handleQuery();
		},
		/** 搜索按钮操作 */
		handleQuery() {
			if(!this.queryParams.user_ids.length){
				this.$message.error('请选择社群老师');
				return false
			}
			if (!this.dateRange.length) {
				this.$message.error('请选择日期范围');
				return false
			}
			this.loading = true
			this.queryParams.start_time = this.dateRange[0];
			this.queryParams.end_time = this.dateRange[1];
			this.getList();
		},
		getList() {
			this.loading = true;
			getHourList(this.queryParams).then((res) => {
				this.loading = false;
				let data = res.data
				data.forEach((item) => {
					let diff = item.flow_num - item.wechat_unique_num;
         			item.rate =  item.flow_num > 0
              					? ((diff / item.flow_num) * 100).toFixed(0)
              					: 0;
				});
				this.tableList = data;
			});
		},
  	},
};
</script>

